<template>
  <div class="app-container">

    <el-form
        size="mini"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
    >
      <el-form-item>
        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
        <el-button type="danger" :icon="Delete" :disabled="single" @click="handleDelete">删除
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-input
            v-model="queryParams.name"
            placeholder="请输入部门名称"
            size="small"
            @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-select
            v-model="queryParams.status"
            placeholder="部门状态"
            clearable
            size="small"
        >
          <el-option :value="1" label="正常"/>
          <el-option :value="0" label="禁用"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
            class="filter-item"
            type="primary"
            size="mini"
            :icon="Search"
            @click="handleQuery"
        >
          搜索
        </el-button>
        <el-button
            :icon="Refresh"
            size="mini"
            @click="resetQuery"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
        v-loading="loading"
        :data="deptList"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="name" label="部门名称"/>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.status==1" type="success">正常</el-tag>
          <el-tag v-else type="info">禁用</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="sort" label="显示排序" width="200"/>


      <el-table-column
          label="操作"
          align="center" width="150"
      >
        <template #default="scope">
          <el-button
              type="primary"
              :icon="Edit"
              size="mini"
              circle
              plain
              @click.stop="handleUpdate(scope.row)"
          >
          </el-button>
          <el-button
              type="success"
              size="mini"
              :icon="Plus"
              circle
              plain
              @click.stop="handleAdd(scope.row)"
          >
          </el-button>

          <el-button
              type="danger"
              :icon="Delete"
              size="mini"
              circle
              plain
              @click.stop="handleDelete(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改部门对话框 -->
    <el-dialog
        :title="dialog.title"
        v-model="dialog.visible"
        width="600px"
        @closed="cancel"
    >
      <el-form
          ref="dataFormRef"
          :model="formData"
          :rules="rules"
          label-width="80px"
      >
        <el-form-item
            label="上级部门"
            prop="parentId"
        >
          <tree-select
              :options="deptOptions"
              placeholder="选择上级部门"
              v-model="formData.parentId"
          />
        </el-form-item>
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入部门名称"/>
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input-number v-model="formData.sort" controls-position="right" style="width: 100px" :min="0"/>
        </el-form-item>
        <el-form-item label="部门状态">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button
              type="primary"
              @click="submitForm">
            确 定
          </el-button>
          <el-button @click="cancel">
            取 消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// Vue依赖
import {onMounted, reactive, unref, ref, toRefs} from 'vue'

// API依赖
import {listDeptTable, getDeptDetail, deleteDept, updateDept, addDept, listDeptSelect} from '@/api/system/dept'

// 组件依赖
import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
import TreeSelect from '@/components/TreeSelect/Index.vue'
import {ElForm, ElMessage, ElMessageBox} from 'element-plus'

// DOM元素的引用声明定义
const queryFormRef = ref(ElForm)
const dataFormRef = ref(ElForm)

const state = reactive({
  // 选中ID数组
  ids: [],
  // 非单个禁用
  single: true,
  disabled: false,
  originOptions: [],
  loading: true,
  // 表格树数据
  deptList: [],
  // 部门树选项
  deptOptions: [] as Array<any>,
  // 弹窗属性
  dialog: {
    title: '',
    visible: false
  },
  // 查询参数
  queryParams: {
    name: undefined,
    status: undefined
  },
  // 表单数据
  formData: {
    id: undefined,
    parentId: '',
    name: '',
    sort: 1,
    status: 1
  },
  // 表单参数校验
  rules: {
    parentId: [
      {required: true, message: '上级部门不能为空', trigger: 'blur'}
    ],
    name: [
      {required: true, message: '部门名称不能为空', trigger: 'blur'}
    ],
    sort: [
      {required: true, message: '显示排序不能为空', trigger: 'blur'}
    ]
  }
})


const {ids, single, disabled, loading, deptList, deptOptions, queryParams, formData, rules, dialog} = toRefs(state)


/**
 * 部门查询
 */
function handleQuery() {
  state.loading = true
  listDeptTable(state.queryParams).then((response: any) => {
    state.deptList = response.data
    state.loading = false
  })
}

/**
 * 重置查询
 */
function resetQuery() {
  const queryForm = unref(queryFormRef)
  queryForm.resetFields()
  handleQuery()
}

function handleSelectionChange(selection: any) {
  state.ids = selection.map((item: any) => item.id)
  state.single = selection.length === 0
}


/**
 * 加载部门下拉数据源
 */
async function loadDeptOptions() {
  const deptOptions: any[] = []
  listDeptSelect().then(response => {
    const rootDeptOption = {id: 0, label: '顶级部门', children: response.data}
    deptOptions.push(rootDeptOption)
    state.deptOptions = deptOptions
  })
}

/**
 * 表单重置
 **/
function resetForm() {
  state.formData = {
    id: undefined,
    parentId: '',
    name: '',
    sort: 1,
    status: 1
  }
}

/**
 * 添加部门
 */
function handleAdd(row: any) {
  resetForm()
  loadDeptOptions()
  state.formData.parentId = row.id
  state.dialog = {
    title: '添加部门',
    visible: true
  }
}

/**
 * 修改部门
 */
async function handleUpdate(row: any) {
  await loadDeptOptions()
  const deptId = row.id || state.ids
  state.dialog = {
    title: '修改部门',
    visible: true
  }
  getDeptDetail(deptId).then((response: any) => {
    state.formData = response.data
  })
}

/**
 * 部门表单提交
 */
function submitForm() {
  const dataForm = unref(dataFormRef)
  dataForm.validate((valid: any) => {

    if (valid) {
      if (state.formData.id) {
        updateDept(state.formData.id, state.formData).then((res: any) => {
          ElMessage.success('修改成功')
          state.dialog.visible = false
          handleQuery()
        })
      } else {
        addDept(state.formData).then(() => {
          ElMessage.success('新增成功')
          state.dialog.visible = false
          handleQuery()
        })
      }
    }
  })
}

/**
 * 删除部门
 *
 * @param row
 */
function handleDelete(row: any) {
  const ids = [row.id || state.ids].join(',')
  ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteDept(ids).then(() => {
      handleQuery()
      ElMessage.success('删除成功')
    }).catch(() => {
      console.log(`删除失败`)
    })
  }).catch(() =>
      ElMessage.info('已取消删除')
  )
}

/**
 * 取消/关闭弹窗
 **/
function cancel() {
  resetForm()
  state.dialog.visible = false
}

onMounted(() => {
  handleQuery()
})
</script>
